<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>上传合同</title>
		<meta name="keywords" content="知果汇" />
		<meta name="description" content="知果汇" />
		<link rel="SHORTCUT ICON" href="_IMG_/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="_CSS_/reset.css">
		<link rel="stylesheet" type="text/css" href="_CSS_/common.css">
		<link rel="stylesheet" type="text/css" href="_CSS_/store_center.css"/>
		<style type="text/css">
		html, body {width: 100%;min-width: 610px;min-height:610px;}
		    .upload-box{padding: 20px;float: left; }
		    .upload-title{display: inline-block;width: 45px;float: left;font-size: 14px;color: #333333;}
		    .upload-list{float: left;display: inline-block;width: 525px;}
		    .upload-btn {width: 98px;height: 98px;margin: 0;border: 1px solid #e5e5e5;}
		    .upload-img{width:98px;height: 98px;position: relative;float: left;margin-right: 33px;margin-bottom: 16px;}
            .upload-btn img{display: block;width: 98px;height: 98px;}
			.upload-btn input{position: absolute;top: 0;margin: 0;width: 98px;height: 98px;border: none;opacity: 0; filter: alpha(opacity=0);cursor: pointer}			
			.upload-img p {width: 98px;font-size: 10px;line-height: 16px; margin-top: -35px;text-align: center;}
			.img-info img{width: 98px;height: 98px;}
			.file-panel {position: absolute;display: none;width: 98px;height: 98px;top: 0;overflow: hidden;z-index: 300;}
			.del_cancel {width: 98px;height: 98px;background-color: rgba( 0, 0, 0, 0.5 );}
			
			.table-btn,.table-btn:hover,.table-btn:focus{color: #ffffff;}
			.point-out{color: #999999;font-size: 14px;padding-left: 45px;float: left;margin-bottom: 15px;}
			.btn-box{width: 570px;text-align: center;margin-top: 20px;}
			.btn-box a {display: inline-block;height: 37px;line-height: 37px;margin: 5px 25px 0;padding: 0 30px;border: 1px solid #dedede;background-color: #fff;color: #333;border-radius: 5px;font-weight: 400;cursor: pointer;text-decoration: none;font-size: 14px;}
			.btn-box .btn-n1{border-color: #3377c0;background-color: #3377c0;color: #ffffff;}
		</style>
	</head>
	<body>
		<form action="" method="post">
            <div class="upload-box">
               <label class="upload-title">上传:</label>
               <div class="upload-list">
               	   <div class="upload-img">
						<div class="upload-btn">
							<img src="_IMG_/upload1.png">
							<input type="file" name="upfile[]" id="file0" onchange="previewImage(this,0)" accept="image/gif, image/jpeg, image/png,application/pdf">
						</div>
					</div>
					<div class="upload-img">
						<div class="upload-btn">
							<img src="_IMG_/upload1.png">
							<input type="file" name="upfile[]" id="file1" onchange="previewImage(this,1)" accept="image/gif, image/jpeg, image/png,application/pdf">
						</div>
					</div>
					<div class="upload-img">
						<div class="upload-btn">
							<img src="_IMG_/upload1.png">
							<input type="file" name="upfile[]" id="file2" onchange="previewImage(this,2)" accept="image/gif, image/jpeg, image/png,application/pdf">
						</div>
					</div>
					<div class="upload-img">
						<div class="upload-btn">
							<img src="_IMG_/upload1.png">
							<input type="file" name="upfile[]" id="file3" onchange="previewImage(this,3)" accept="image/gif, image/jpeg, image/png,application/pdf">
						</div>
					</div>
					<div class="upload-img">
						<div class="upload-btn">
							<img src="_IMG_/upload1.png">
							<input type="file" name="upfile[]" id="file4" onchange="previewImage(this,4)" accept="image/gif, image/jpeg, image/png,application/pdf">
						</div>
					</div>
               </div>
               <p class="point-out">注：仅支持JPG、PNG、JPEG、pdf格式，注意文件名不能有中文或空格，每张图片大小不超过5M</p>
               <div class="btn-box">
               	   <a class="btn-n1" href="#" title="确认" onclick="confirm()">确认</a>
               	   <a class="btn-n2" href="#" title="取消" onclick="cancel()">取消</a>
               </div>
            </div>
		</form>
	</body>
	<script src="_JS_/jquery-1.8.3.min.js"></script>
	<script src="_JS_/jquery.base64.js"></script>
	<script src="_JS_/jquery.cookie.js"></script>
	<script src="_JS_/common.js"></script>
	<script src="_P_/layer/layer.js"></script>
	<script type="text/javascript">
		var url = window.location.href;
		var id=url.split("#")[1];
	   //文件上传
	    function previewImage(obj,num){
			var filepath=$(obj).val();
			fileObj = document.getElementById('file'+num);
			value = window.URL.createObjectURL(fileObj.files[0]);
			file_size = obj.files[0].size;
			size = file_size / 1024;
			var ldot = filepath.lastIndexOf(".");
			var types = filepath.substring(ldot + 1);

			if (size > 1024*5) {
				$('#file'+num).val("");
				layer.alert('上传图片不得大于5MB', {
					closeBtn: 0
				});
			} else {
				if(types == 'pdf'){
					$(obj).parents(".upload-img").prepend('<div class="img-info"><img src="/static/web/images/pdf.png"/><div class="file-panel"><div class="del_cancel"><a class="btn table-btn" style="color: #ffffff;display: block;font-size: 18px;font-weight: bold;margin-left: 82px;height: 18px;line-height: 18px;text-decoration: none;" title="删除" href="javascript:;">×</a></div></div></div>');
				}else{
					$(obj).parents(".upload-img").prepend('<div class="img-info"><img src="'+value+'"/><div class="file-panel"><div class="del_cancel"><a class="btn table-btn" style="color: #ffffff;display: block;font-size: 18px;font-weight: bold;margin-left: 82px;height: 18px;line-height: 18px;text-decoration: none;" title="删除" href="javascript:;">×</a></div></div></div>');
				}
				$(obj).parent(".upload-btn").hide();
				$(obj).parents(".upload-img").children('p').hide();

				$('.img-info').hover(function(){	
					$(this).find(".file-panel").show();
				},function(){
					$(this).find(".file-panel").hide();

				});
				$(".del_cancel a").on("click",function(){
					$('#file'+num).val(""); 
					$(this).parents('.upload-img').find(".upload-btn").show();
					$(this).parents('.upload-img').find(".upload-img p").show();
					$(this).parents(".img-info").remove();

				});
			}
		}
		//确认
		function confirm(obj){
			//上传
			var formData = new FormData($('form')[0]);
			formData.append('id', id);
			$.ajax({
				type: "post",
				url: "/index.php/api/form/msg_upload",
				data: formData,
				dataType: 'json',
				beforeSend: function () {
                var index = layer.load(1, {
                    shade: [0.1, '#333333'] //0.1透明度的白色背景
                });
				},
				success: function (msg) {
					layer.closeAll();
					if (msg.code == 200) {
						parent.order_service(1);
						var index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index);
					}else if (msg.code == 1002) {
							layer.msg(msg.message, {icon: 5});
							parent.order_service(1);
							var desk = parent.layer.getFrameIndex(window.name);
							parent.layer.close(desk);
						}else{
							layer.msg(msg.message, {icon: 5});
						}
				},
				contentType: false, //必须false才会自动加上正确的Content-Type
				processData: false //必须false才会避开jQuery对 formdata 的默认处理
			});
		}
		//取消
		function cancel(obj){
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		}
	</script>
</html>
